---
title: 主題設置
description: 使用和自定義主題
---

# 主題設置

## 使用和自定義主題

您可以調整 RainbowKit 的介面以符合您的品牌。您可以從一些預定義的重點色彩和邊框半徑配置中選擇。

內建有 3 種主題函數：

- `lightTheme` （預設）
- `darkTheme`
- `midnightTheme`

一個主題函數返回一個主題物件。您可以將此物件傳遞給 `RainbowKitProvider` 的 `theme` 屬性。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

如果您願意，可以傳遞 `accentColor`、`accentColorForeground`、`borderRadius`、`fontStack` 和 `overlayBlur` 來進行自定義。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider
    theme={darkTheme({
      __accentColor__: '#7b3fe4',
      __accentColorForeground__: 'white',
      __borderRadius__: 'small',
      __fontStack__: 'system',
      __overlayBlur__: 'small',
    })}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);
```

### 自定義內建主題

內建主題函數還接受選項物件，讓您可以選擇幾種不同的視覺風格。

<PropsTable
  data={[
    {
      name: 'accentColor',
      required: false,
      default: '"#0E76FD"',
      type: 'string',
      description:
        '各種互動元素的背景/文字顏色。',
    },
    {
      name: 'accentColorForeground',
      required: false,
      default: '"white"',
      type: 'string',
      description:
        '用於強調色彩上方呈現的前景元素的顏色。',
    },
    {
      name: 'borderRadius',
      required: false,
      default: 'large',
      type: '"none" | "small" | "medium" | "large"',
      typeSimple: 'enum',
      description: '整個邊框半徑的大小。',
    },
    {
      name: 'fontStack',
      required: false,
      default: 'rounded',
      type: '"rounded" | "system"',
      typeSimple: 'enum',
      description:
        "UI 使用的字體堆疊。注意，當不支持時，`rounded` 會嘗試使用 SF Pro Rounded，然後回退到系統字體。",
    },
    {
      name: 'overlayBlur',
      required: false,
      default: 'none',
      type: '"large" | "small" | "none"',
      typeSimple: 'enum',
      description: '模態背景的模糊效果。',
    },
  ]}
/>

例如，將深色主題自定義為紫色重點色和中等邊框半徑：

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

每個主題也提供幾個現成的重點色彩預設（`blue`、`green`、`orange`、`pink`、`purple`、`red`），可以將它們加入到選項物件中。例如，使用 `pink` 重點色彩預設：

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.pink,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### 示例

#### 主題函數

這是幾種使用 `theme` 屬性的方法。

使用 `darkTheme` 主題。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

使用 `midnightTheme` 主題。

```tsx
import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={midnightTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

#### 重點色

這是幾種使用 `accentColor` 配置的方法。

將重點色設置為自定紫色值。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

將重點色設置為內建的 `green` 設置。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.green,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### 邊框半徑

這是幾種使用 `borderRadius` 配置的方法。

將邊框半徑設置為 `medium`。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

將邊框半徑設置為 `none`。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'none',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

> 提醒：可用的邊框半徑值有：`large`（預設）、`medium`、`small` 和 `none`。

#### 字體堆疊

預設情況下，`fontStack` 設置為 `rounded`。但這是您可以使用 `fontStack` 配置的方法。

將字體堆疊設置為 `system`。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### 模糊覆蓋

預設情況下，`overlayBlur` 設置為 `none`。但這是您可以使用 `overlayBlur` 配置的方法。

將覆蓋模糊設置為 `small`。

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        overlayBlur: 'small',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### 混搭

這是您可以將不同主題與 `accentColor`、`borderRadius` 和 `fontStack` 屬性結合使用的方法。

- 使用 `lightTheme` 主題
- 將重點色設置為自定紫色值
- 將邊框半徑設置為 `medium`
- 將字體堆疊設置為 `system`

```tsx
import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={lightTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

- 使用 `midnightTheme` 主題
- 將重點色設置為內建的 `pink` 設置。
- 將邊框半徑設置為 `small`
- 將字體堆疊設置為 `system`

```tsx
import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={midnightTheme({
        ...midnightTheme.accentColors.pink,
        borderRadius: 'small',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### 黑暗模式支持

如果您的應用程式使用標準的 `prefers-color-scheme: dark` 媒體查詢在模式之間切換，您可以選擇提供包含 `lightMode` 和 `darkMode` 值的動態主題物件。

```tsx
import {
  RainbowKitProvider,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => (
  <RainbowKitProvider
    theme={{
      lightMode: lightTheme(),
      darkMode: darkTheme(),
    }}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);
```
